<style class="_dcdev_preset_">
    /* 分页箭头旋转效果 */
    .rotate-90 {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: all .3s linear;
        -ms-transform: all .3s linear;
        -moz-transform: all .3s linear;
        -webkit-transform: all .3s linear;
        -o-transform: all .3s linear;
    }

    .rotate-0 {
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: all .3s linear;
        -ms-transform: all .3s linear;
        -moz-transform: all .3s linear;
        -webkit-transform: all .3s linear;
        -o-transform: all .3s linear;
    }
</style>

<script class="_dcdev_preset_">
    // 字段格式化相关函数
    {
        // 点击li触发的事件
        function _dc_on_click_ul_(li, id, key, index) {
            // 获取表格相关配置数据
            var _dc_render_data_ = window[`_dc_${id}_render_data_`];
            var _dc_selected_items_;
            // 处理选择
            if (_dc_render_data_.check_config && _dc_render_data_.check_config.enable && $(li).data("key") ==
                "check_tag") {
                // 获取当前行的index
                var index = $(li.parentElement).attr("index");
                // 单选
                if (_dc_render_data_.check_config.mode == "single") {
                    var array = document.getElementById(`_dc_${id}_ul_`).children;
                    // 清空已选择状态
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index];
                        // 当前节点
                        if (element.children[0] == li) {
                            // 设置当前选中状态
                            if ($(element.children[0]).data("checked") != 1) {
                                $(element.children[0]).html(_dc_render_data_.check_config.on_config.html)
                                $(element.children[0]).data("checked", 1);
                                _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 1;
                            } else {
                                $(element.children[0]).html(_dc_render_data_.check_config.off_config.html)
                                $(element.children[0]).data("checked", 0);
                                _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 0;
                            }
                        } else {
                            $(element.children[0]).html(_dc_render_data_.check_config.off_config.html)
                            $(element.children[0]).data("checked", 0);
                            _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 0;
                        }
                    }
                }
                // 多选
                else if (_dc_render_data_.check_config.mode == "multi") {
                    // 设置当前选中状态
                    if ($(li).data("checked") != 1) {
                        $(li).html(_dc_render_data_.check_config.on_config.html)
                        $(li).data("checked", 1);
                        _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 1;
                    } else {
                        $(li).html(_dc_render_data_.check_config.off_config.html)
                        $(li).data("checked", 0);
                        _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 0;
                    }
                    var that = window[`_dc_${id}_render_object_`];
                }
                // 选择之后计算数值
                _dc_selected_items_ = that._dc_check_counting_();
            }

            // 点击回调
            if (_dc_render_data_.cb_config.click) {
                var res = {
                    li_node: li,
                    li_selector: $(li),
                    li_key: $(li).data("key"),
                    ul_index: index,
                    ul_value: _dc_render_data_.data_fetched.all_data[index],
                    selected_items: _dc_selected_items_,
                };
                _dc_render_data_.cb_config.click(res);
            }
        };

        //分页跳转到指定页
        function _dc_jump_to_page(id, limit) {
            var that = window[`_dc_${id}_render_object_`];
            $(`#_dc_${id}_current_page_inputor_`).val('1')
            $(`#_dc_${id}_select_page_count_arrow_`).removeClass("rotate-a-90")
                .addClass("rotate-a-0");
            $('div[select-count="' + id + '"]').remove();
            $("#select_page_count" + id).html(limit)
            _dc_render_data_ = window[`_dc_${id}_render_data_`];
            _dc_render_data_.data_config.require.data[_dc_render_data_.data_config.require.page_count_param] = limit;
            // 保存当前组件的页数
            localStorage[encodeURIComponent(location.href) + "_" + id + "_limit"] = limit;
            that._dc_get_page_data_(id, 1);
        }
    }

    // 相关类函数
    function render_class() {
        var that;
        var _dc_render_data_;
        var ul_width = 0;
        var ul_height = 0;
        var current_position = 0;
        var is_fetching_data = false;
        var direction_style = "";
        // 相关功能函数
        {
            render_class.prototype._dc_expression_counting_value_ = function () {

            }

            render_class.prototype._dc_on_change_input_value_ = function (_this, value) {
                // 将数值写入文本框
                $($(_this).parent()[0].children[1].children[0]).val(value);
                // 获取li_function.item_amount中的字段函数配置信息
                var li_function = window[`_dc_${$(_this).attr("key")}_render_data_`].li_config
                    .li_function[$(_this).attr("li_function_index")];
                // 获得计算表达式
                var expression = li_function.expression.replace(/#{/, "row_data['").replace(/}/, "']").replace(
                    "^{value}", value);
                // 获得在数据集中的index
                var index = parseInt($(_this).attr("index"));
                // 获得该行数据
                var row_data = window[`_dc_${$(_this).attr("key")}_render_data_`].data_fetched.page_data[index];
                var expression_value;
                var expression_array = [];
                try {
                    expression_value = eval(expression);
                    if (li_function.toFixed) {
                        expression_value = expression_value.toFixed(li_function.toFixed);
                        expression_array = expression_value.split(".");
                    }
                } catch (error) {}

                if (window[li_function.items.on_change_value]) {
                    row_data._dc_values_ ? null : row_data._dc_values_ = null;
                    // 所选择行的索引
                    row_data._dc_index = index;
                    // 所输入的数量值
                    row_data._dc_input_value = value;
                    // 表达式计算之后的值
                    row_data._dc_expression_value_ = expression_value;
                    // 有小数点
                    if (expression_array.length > 1) {
                        row_data._dc_expression_int_value_ = expression_array[0];
                        row_data._dc_expression_float_value_ = expression_array[1];
                    }
                    // 获得当前所有数据
                    var array = that._dc_render_data_.data_fetched.all_data;
                    var _dc_selected_items_ = [];
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index];
                        if (element._dc_select_) {
                            _dc_selected_items_.push(array[index]);
                        }
                    }
                    // 拆分小数点前后的值
                    if (expression_array.length > 1) {
                        window[li_function.items.on_change_value]({
                            row_data: row_data,
                            index: index,
                            value: value,
                            expression_value: expression_value,
                            expression_int_value: expression_array[0],
                            expression_float_value: expression_array[1],
                        });
                    } else {
                        window[li_function.items.on_change_value]({
                            row_data: row_data,
                            index: index,
                            value: value,
                            expression_value: expression_value,
                        });
                    }
                }
            }

            // 选择之后计算数值
            render_class.prototype._dc_check_counting_ = function (obj) {
                // 获得当前所有数据
                var array = that._dc_render_data_.data_fetched.all_data;
                var _dc_selected_items_ = [];
                for (let index = 0; index < array.length; index++) {
                    const element = array[index];
                    if (element._dc_select_) {
                        _dc_selected_items_.push(array[index]);
                    }
                }
                return _dc_selected_items_;
            }
            // 深复制对象
            render_class.prototype._dc_deep_clone_dict_ = function (obj) {
                if (!(typeof obj === 'object' && obj)) {
                    return null;
                }
                var new_obj = Array.isArray(obj) ? [] : {};
                for (var key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (typeof obj[key] === 'obj' && obj[key]) {
                            new_obj[key] = deepClone(obj[key]);
                        } else {
                            new_obj[key] = obj[key];
                        }
                    }
                }
                return new_obj;
            }

            // 获取指定时间离当前时间的值
            render_class.prototype._dc_get_diff_date_ = function (dateTimeStamp) {
                var minute = 1000 * 60;
                var hour = minute * 60;
                var day = hour * 24;
                var halfamonth = day * 15;
                var month = day * 30;
                var now = new Date().getTime();
                dateTimeStamp = new Date(dateTimeStamp.replace(/-/g, "/"));
                var diffValue = now - dateTimeStamp;
                if (diffValue < 0) {
                    diffValue = Math.abs(diffValue);
                    var monthC = diffValue / month;
                    var weekC = diffValue / (7 * day);
                    var dayC = diffValue / day;
                    var hourC = diffValue / hour;
                    var minC = diffValue / minute;
                    if (monthC >= 1) {
                        result = "" + parseInt(monthC) + "月后";
                    } else if (weekC >= 1) {
                        result = "" + parseInt(weekC) + "周后";
                    } else if (dayC >= 1) {
                        result = "" + parseInt(dayC) + "天后";
                    } else if (hourC >= 1) {
                        result = "" + parseInt(hourC) + "小时后";
                    } else if (minC >= 1) {
                        result = "" + parseInt(minC) + "分钟后";
                    } else
                        result = "刚刚";
                    return result;
                } else {
                    var monthC = diffValue / month;
                    var weekC = diffValue / (7 * day);
                    var dayC = diffValue / day;
                    var hourC = diffValue / hour;
                    var minC = diffValue / minute;
                    if (monthC >= 1) {
                        result = "" + parseInt(monthC) + "月前";
                    } else if (weekC >= 1) {
                        result = "" + parseInt(weekC) + "周前";
                    } else if (dayC >= 1) {
                        result = "" + parseInt(dayC) + "天前";
                    } else if (hourC >= 1) {
                        result = "" + parseInt(hourC) + "小时前";
                    } else if (minC >= 1) {
                        result = "" + parseInt(minC) + "分钟前";
                    } else
                        result = "刚刚";
                    return result;
                }
            }

            // 替换指定位置字符串
            render_class.prototype._dc_mask_text_ = function (text, from, count, char) {
                var _text_ = "";
                for (let index = 0; index < count; index++) {
                    _text_ += char;
                }
                return text.substr(0, from) + _text_ + text.substr(from + count, text.length - from - count);
            }

            // 格式化文件大小带单位的字符串
            render_class.prototype._dc_get_file_formated_size_ = function (value, bit) {
                if (null == value || value == '') {
                    return "0B";
                }
                var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
                var index = 0;
                var srcsize = parseFloat(value);
                index = Math.floor(Math.log(srcsize) / Math.log(1024));
                var size = srcsize / Math.pow(1024, index);
                size = size.toFixed(bit); //保留的小数位数
                return size + unitArr[index];
            }
        }

        render_class.prototype.render =
            function (data) {
                // 赋值that，与函数内的this作区分
                that = this;
                // 保存传入的配置数据
                that._dc_render_data_ = data;
                // 保存全局变量数据
                window[`_dc_${that._dc_render_data_.id}_render_object_`] = that;
                // 根据全局变量数据
                window[`_dc_${that._dc_render_data_.id}_render_data_`] = data;

                // 当前从接口拉取的数据
                that._dc_render_data_.data_fetched = [];
                // 从接口拉取的所有数据
                that._dc_render_data_.data_fetched.all_data = [];

                // 设置默认值
                that._dc_render_data_.ul_config = that._dc_render_data_.ul_config ? that._dc_render_data_.ul_config :
                {};

                // 目标div没有设置高度则默认100%，如果不设置高度将无法监听滚动事件
                if (!document.getElementById(data.id).style.height) {
                    document.getElementById(data.id).style.height = "100%";
                }

                // 禁止ul前面显示默认 ·
                var style = document.createElement(`style`);
                style.type = `text/css`;
                style.className = "_dcdev_preset_";
                style.innerHTML = `#${data.id} ul .none {list-style-type: none;}`;
                document.getElementsByTagName(`HEAD`).item(0).appendChild(style);

                // hover相关配置
                if (that._dc_render_data_.hover_config && that._dc_render_data_.hover_config.enable) {
                    // 添加hover样式
                    var style = document.createElement(`style`);
                    style.type = `text/css`;
                    style.className = "_dcdev_preset_";
                    style.innerHTML = `#${data.id} li:hover {${that._dc_render_data_.hover_config.style});}`;
                    document.getElementsByTagName(`HEAD`).item(0).appendChild(style);
                }

                // 本地数据模式
                if (that._dc_render_data_.data_config.data && that._dc_render_data_.data_config.data.length > 0) {

                }
                // 接口请求模式
                else if (that._dc_render_data_.data_config.require) {
                    // 搜索栏相关
                    if (that._dc_render_data_.search_config && that._dc_render_data_.search_config.enable) {
                        $('#' + that._dc_render_data_.id).append(
                            `<div id="_dc_${that._dc_render_data_.id}_search_bar_" style="width:100%;"></div>`);
                        tempStr = `
<div id="_dc_${that._dc_render_data_.id}_search_panel_">
    <div style="height:32px;background-color:white;display:-webkit-inline-box;margin-bottom:10px;border-width: 1px;border-style: solid;border-color: lightgray;">
        <div
            style="width:150px;height:32px;display:-webkit-box;">
            <input style="width: 120px;height:26px;border-style: none;margin-top: 2px;" id="_dc_${that._dc_render_data_.id}_search_input_"
                type="text">
            <img id="_dc_${that._dc_render_data_.id}_clear_search_" style="display: none;"
                src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/close.svg" alt=""
                width="30px">
        </div>
        <img id="_dc_${that._dc_render_data_.id}_exec_search_"
            src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/search.svg" alt=""
            width="30px">
    </div>  
</div>`
                        // 插入搜索框
                        $(`#_dc_${that._dc_render_data_.id}_search_bar_`).html(tempStr);
                        // 监听输入事件
                        $(`#_dc_${that._dc_render_data_.id}_search_input_`).keyup(function (event) {
                            var e = (event) ? event : window.event;
                            // 回车
                            if (e.keyCode == 13) {
                                // 跳到第一页
                                that._dc_render_data_.data_fetched.page_number = 1;
                                // 清空原有内容
                                that._dc_render_data_.data_fetched.all_data = [];
                                $(`#_dc_${that._dc_render_data_.id}_ul_container_`).html("");
                                // 重新获取首页数据
                                that._dc_get_page_data_(that._dc_render_data_.id, 1)
                            }
                            // esc 键
                            else if (e.keyCode == 27) {
                                $(this).val("")
                            } else {
                                value = $(this).val();
                                // 显示清空按钮
                                $(`#_dc_${that._dc_render_data_.id}_clear_search_`).css("display", value ?
                                    "block" : "none");
                            }
                        });

                        // 点击查询按钮
                        $(`#_dc_${that._dc_render_data_.id}_exec_search_`).click(function () {
                            // 清空原有内容
                            that._dc_render_data_.data_fetched.page_number = 1;
                            that._dc_render_data_.data_fetched.all_data = [];
                            $(`#_dc_${that._dc_render_data_.id}_ul_container_`).html("");
                            that._dc_get_page_data_(that._dc_render_data_.id, 1)
                        })

                        // 点击清除
                        $(`#_dc_${that._dc_render_data_.id}_clear_search_`).click(function () {
                            $(this.parentElement.firstElementChild).val("");
                            $(this).css("display", "none");
                            $(this.parentElement.firstElementChild).focus();
                        })
                    }

                }

                // 添加ul，并设置滚动模式
                switch (that._dc_render_data_.direction) {
                    case "block":
                        that.direction_style = "display: flex;list-style: none;";
                        $(`#${that._dc_render_data_.id}`).css("overflow-y", "scroll")
                            .append(
                                `<div id="_dc_${that._dc_render_data_.id}_ul_container_" class="_dcdev_preset_"></div>`
                            );
                        break;
                    case "x":
                        that.direction_style = "display: flex;list-style: none;";
                        $(`#${that._dc_render_data_.id}`).css("overflow-" + that._dc_render_data_.direction, "scroll")
                            .append(
                                `<div id="_dc_${that._dc_render_data_.id}_ul_container_" class="_dcdev_preset_"></div>`
                            );
                        break;
                    case "y":
                        that.direction_style = "";
                        $(`#${that._dc_render_data_.id}`).css("overflow-" + that._dc_render_data_.direction, "scroll")
                            .append(
                                `<div id="_dc_${that._dc_render_data_.id}_ul_container_" class="_dcdev_preset_"></div>`
                            );
                        break;
                }

                // 轮播图相关配置
                if (that._dc_render_data_.scrolling_config) {
                    // var len = that._dc_render_data_.data_config.data.length;
                    // that._dc_render_data_.data_config.data.unshift(that._dc_render_data_.data_config.data[len - 1]);
                    // that._dc_render_data_.data_config.data.pop();
                    // 添加指示器容器
                    var a = that._dc_render_data_.scrolling_config.indicator_container.html
                        .replace(" ", ` id='_dc_${that._dc_render_data_.id}_indicator_container_' `);
                    // 左右按钮
                    var b = that._dc_render_data_.scrolling_config.left_button.html.replace(" ",
                        ` id='_dc_${that._dc_render_data_.id}_indicator_left_button_' key='${that._dc_render_data_.id}'`
                    );
                    var c = that._dc_render_data_.scrolling_config.right_button.html.replace(" ",
                        ` id='_dc_${that._dc_render_data_.id}_indicator_right_button_' key='${that._dc_render_data_.id}'`
                    );
                    $(`#_dc_${that._dc_render_data_.id}_ul_container_`).prepend(
                        `<div style="position:absolute;width:${browser_info.width}px;">${a}${b}${c}</div>`)
                }

                // 请求模式
                if (!(that._dc_render_data_.data_config.data && that._dc_render_data_.data_config.data.length > 0)) {
                    // 分页显示模式
                    if (that._dc_render_data_.data_config.require && that._dc_render_data_.data_config.require
                        .pagination &&
                        that._dc_render_data_.data_config.require
                        .pagination.enable) {
                        $('#' + data.id).append($("#_dc_" + that._dc_render_data_.id + "_pagination_container_"));
                        $('#' + data.id).append(
                            `<div id="_dc_${that._dc_render_data_.id}_pagination_bar_" style="width:100%;margin-bottom: 10px;"></div>`
                        );
                        _dc_inputor_id_ = `_dc_${that._dc_render_data_.id}_current_page_inputor_`;
                        // 获取每页显示的行数
                        var _dc_page_limit_ = that._dc_render_data_.data_config.require.data[that._dc_render_data_
                            .data_config.require.page_count_param];
                        var tempStr = `
<div select-id="${data.id}" style="position:absolute;"></div>
<div style="display:-webkit-inline-box;margin-top:10px;">
<a id="_dc_${data.id}_click_step_pre_page"><img id="pre_step_${data.id}" width="32px" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/pre-step.svg"></a>
<a id="_dc_${data.id}_click_pre_page"><img id="pre_${data.id}" width="32px" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/pre.svg"></a>
<input style="width: 70px;height:32px;" type="number" id="${_dc_inputor_id_}" value="">
<a id="_dc_${data.id}_click_next_page"><img id="next_${data.id}" class="dcdev-rotate-180" style="margin-top:-2px;" width="32px" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/pre.svg"></a>
<a id="_dc_${data.id}_click_step_next_page"><img id="next_step_${data.id}" class="dcdev-rotate-180" style="margin-top:-2px;" width="32px" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/pre-step.svg"></a>

<div id="_dc_select_page_count_div_${data.id}" style="cursor:default;display:-webkit-inline-box;border-color: lightgray;border-width: 1px;border-style: solid;height: 32px;margin-left: 10px;">
<div id="select_page_count${data.id}" style="margin-left:5px;margin-top:5px;margin-right:5px;height: 32px;">${_dc_page_limit_}</div>
<img id="_dc_${data.id}_select_page_count_arrow_" width="32px" class="rotate-0" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/pre.svg">
</div>
<br>
</div>
<div style="display: inline-block;font-size:12px;color:gray;" id="_dc_detail_${data.id}"></div>
`
                        // 插入分页选择框
                        $("#" + "_dc_" + that._dc_render_data_.id + "_pagination_bar_").html(tempStr);

                        $("#")
                        limit = localStorage[encodeURIComponent(location.href) + "_" + data.id + "_limit"];
                        // 已保存之前的页数
                        if (limit) {
                            that._dc_render_data_.data_config.require.data[that._dc_render_data_
                                .data_config.require.page_count_param] = limit;
                            $(`#select_page_count${data.id}`).html(limit);
                        }
                        // 没有保存则使用默认
                        else {}

                        $(`#_dc_select_page_count_div_${data.id}`).click(function () {
                            var page_count_limits = "";
                            for (var i = 0; i < data.data_config.page.limits.length; i++) {
                                page_count_limits += `
<dd onclick="_dc_jump_to_page('${data.id}','${data.data_config.page.limits[i]}')">
<a href='javascript:;'>${data.data_config.page.limits[i]}</a></dd>`
                            }
                            // 关闭菜单事件
                            if ($(`#_dc_${data.id}_select_page_count_arrow_`).hasClass("rotate-90")) {
                                $(`#_dc_${data.id}_select_page_count_arrow_`).removeClass("rotate-90")
                                    .addClass("rotate-0");
                                $('div[select-count="' + data.id + '"]').remove()
                            }
                            // 展开菜单事件
                            else {
                                $(`#_dc_${data.id}_select_page_count_arrow_`).removeClass("rotate-0")
                                    .addClass("rotate-90");
                                if (browser_info.is_mobile) {
                                    var width = browser_info.width - 20 * 0.524 * 0.125
                                    $('div[select-id="' + data.id + '"]').append(
                                        "<div class='select_page_count' select-count='" +
                                        data.id +
                                        "'></div>");
                                    $('div[select-count="' + data.id + '"]').append(`
                <dl style='top: -115px;margin-left: 220px;min-width: 61px;text-align: center;' class='layui-nav-child layui-anim layui-anim-upbit layui-show'>
                    ${page_count_limits}
                </dl>
                `);
                                } else {
                                    var width = browser_info.width * 0.524 * 0.125
                                    $('div[select-id="' + data.id + '"]').append(
                                        "<div class='select_page_count' select-count='" +
                                        data.id +
                                        "'></div>");
                                    $('div[select-count="' + data.id + '"]').append(`
                <dl style="top: -115px;min-width: 61px;text-align: center;left:240px;margin-left: -20px;" class="layui-nav-child layui-anim layui-anim-upbit layui-show">
                    ${page_count_limits}
                </dl>
                `);
                                }
                            }
                        })

                        function handleGetPageInput(data, _this) {
                            page_number_to_go = 0;
                            // 为空时设置为=1
                            if ($(_this).val() == "") {
                                $(_this).val(1);
                                page_number_to_go = 1;
                            } else {
                                _value = parseInt($(_this).val());
                                if (_value > data.data_fetched.page_amount) {
                                    $(_this).val(data.data_fetched.page_amount);
                                    page_number_to_go = data.data_fetched.page_amount;
                                    // 忽略
                                } else if (_value < 1) {
                                    $(_this).val(1);
                                    page_number_to_go = 1;
                                    // 忽略
                                } else {
                                    page_number_to_go = $(_this).val();
                                }
                            }
                            that._dc_get_page_data_(data.id, page_number_to_go);
                        }
                        $('#' + _dc_inputor_id_).blur(function () {
                            handleGetPageInput(data, this);
                        });

                        // 添加输入页码事件
                        $('#' + _dc_inputor_id_).keyup(function (event) {
                            var e = (event) ? event : window.event;
                            if (e.keyCode == 13) {
                                handleGetPageInput(data, this);
                            }
                        });
                        // 分页按钮点击事件
                        $(`#_dc_${data.id}_click_step_pre_page`).click(function () {
                            that._dc_click_page_(this, data.id, "step_pre_page");
                        })
                        $(`#_dc_${data.id}_click_pre_page`).click(function () {
                            that._dc_click_page_(this, data.id, "pre_page");
                        })
                        $(`#_dc_${data.id}_click_next_page`).click(function () {
                            that._dc_click_page_(this, data.id, "next_page");
                        })
                        $(`#_dc_${data.id}_click_step_next_page`).click(function () {
                            that._dc_click_page_(this, data.id, "step_next_page");
                        })
                    }
                    // 无限加载模式
                    else {
                        var direction = that._dc_render_data_.direction;
                        // 如果不是横向滚动则全部设置为竖向滚动
                        if (direction != "x") {
                            direction = "y";
                        }
                        // 监听滚动事件
                        switch (direction) {
                            case "x":
                                // 横向滚动
                                document.getElementById(that._dc_render_data_.id).addEventListener("scroll", (
                                    e) => {
                                    that.current_position = parseInt($(document.getElementById(that
                                        ._dc_render_data_
                                        .id)).css("width").replace("px")) + e.target.scrollLeft;
                                    that.ul_width = e.target.scrollWidth
                                    // 到尽头
                                    if (that.current_position == that.ul_width) {
                                        // 没有更多
                                        if (that._dc_render_data_.data_fetched.page_amount == that
                                            ._dc_render_data_
                                            .data_config
                                            .page_number) {
                                            if (that._dc_render_data_.cb_config.no_more) {
                                                that._dc_render_data_.cb_config.no_more();
                                            }
                                        }
                                    }
                                    // 判断是否已经到页面的75% 并且 上一次渲染是否完成
                                    else if (!that.is_fetching_data && that.current_position > that
                                        .ul_width *
                                        0.75) {
                                        // 当前页
                                        var current_page = that._dc_render_data_.data_fetched.page_number;
                                        // 总页数
                                        var page_amount = that._dc_render_data_.data_fetched.page_amount;
                                        // 当前页少于总页数时
                                        if (current_page < page_amount) {
                                            // 条件成立时 请求下一页数据
                                            current_page++;
                                            that.is_fetching_data = true;
                                            that._dc_get_page_data_(that._dc_render_data_.id, current_page);
                                        }
                                    }
                                })
                                break;
                            case "y":
                                // 纵向滚动
                                document.getElementById(that._dc_render_data_.id).onscroll = function (e) {
                                    that.current_position = this.clientHeight + e.target.scrollTop;
                                    that.ul_height = e.target.scrollHeight;
                                    // 到尽头
                                    if (that.current_position == that.ul_height) {
                                        // 没有更多
                                        if (that._dc_render_data_.data_fetched.page_amount == that
                                            ._dc_render_data_
                                            .data_fetched
                                            .page_number) {
                                            if (that._dc_render_data_.cb_config.no_more) {
                                                that._dc_render_data_.cb_config.no_more();
                                            }
                                        }
                                    }
                                    // 判断是否已经到页面的75% 并且 上一次渲染是否完成
                                    else if (!that.is_fetching_data && that.current_position > that.ul_height *
                                        0.75) {
                                        console.log("获取下页数据")
                                        // 当前页
                                        var current_page = that._dc_render_data_.data_fetched.page_number;
                                        // 总页数
                                        var page_amount = that._dc_render_data_.data_fetched.page_amount;
                                        // 当前页少于总页数时
                                        if (current_page < page_amount) {
                                            // 条件成立时 请求下一页数据
                                            current_page++;
                                            that.is_fetching_data = true;
                                            that._dc_get_page_data_(that._dc_render_data_.id, current_page);
                                        }
                                    }
                                }
                                break;
                        }
                    }
                }
                that._dc_get_page_data_(that._dc_render_data_.id, 1);
            }

        // 添加指示器
        render_class.prototype._dc_append_indicator_ =
            function (_id, indicator_status, count) {
                var id = `_dc_${_id}_indicator_container_`;
                var _id = _id;
                var node;
                // 先添加节点
                $(`#${id}`).append(indicator_status.active.html);
                // 再获取节点样式放到class
                var _style_ =
                    document.getElementById(id).children[0].style.cssText;
                var style = document.createElement(`style`);
                style.type = `text/css`;
                style.className = "_dcdev_preset_";
                style.innerHTML = `.${id}active_class_ {${_style_}}`;
                document.getElementsByTagName(`HEAD`).item(0).appendChild(style);
                node = document.getElementById(id).children[0];
                $(node).attr("class", `_dcdev_preset_ ${id}active_class_ ${id}a`)
                $(node).attr("style", "23")
                $(node).attr("index", 0);
                $(node).attr("id", id);

                // 添加菜单项2节点并设置为非选中类
                $(`#${id}`).append(indicator_status.deactive.html);
                _style_ =
                    document.getElementById(id).children[1].style.cssText;
                style = document.createElement(`style`);
                style.type = `text/css`;
                style.className = "_dcdev_preset_";
                style.innerHTML = `.${id}deactive_class_ {${_style_}}`;
                document.getElementsByTagName(`HEAD`).item(0).appendChild(style);
                node = document.getElementById(id).children[1];
                $(node).attr("class", `_dcdev_preset_ ${id}deactive_class_ ${id}a`)
                $(node).attr("style", "")
                $(node).attr("index", 1);
                $(node).attr("id", id);

                var _index_ = 0;
                var _touch_start_ = 0;
                var _touch_end_ = 0;

                // 添加其它节点
                for (let index = 2; index < count; index++) {
                    $(`#${id}`).append(indicator_status.deactive.html);
                    _index_ = [document.getElementById(id).children.length - 1];
                    node = document.getElementById(id).children[_index_];
                    $(node).attr("class",
                        `_dcdev_preset_ ${id}deactive_class_ ${id}a`);
                    $(node).attr("style", "");
                    $(node).attr("index", index);
                    $(node).attr("id", id);
                }
                var is_scrolling = false;

                // 移动端使用touch事件
                if (browser_info.is_mobile) {
                    $(`#${_id}`).on('touchstart', function (e) {
                        var _touch = e.originalEvent.targetTouches[0];
                        _touch_start_ = _touch.pageX;
                    });

                    $(`#${_id}`).on('touchmove', function (e) {
                        return false;
                    });

                    $(`#${_id}`).on('touchend', function (e) {
                        var _touch = e.originalEvent.changedTouches[0];
                        _touch_end_ = _touch.pageX;
                        // 划动距离
                        var offset = _touch_end_ - _touch_start_;
                        // 向右划超过半屏
                        if (offset > (browser_info.width / 3)) {
                            _dc_render_data_ = window[`_dc_${this.id}_render_data_`];
                            that._dc_update_indicator_(_id, _dc_render_data_.scrolling_config.indicator_index,
                                2);
                        }
                        // 向左划超过半屏
                        else if (offset < (-(browser_info.width / 3))) {
                            _dc_render_data_ = window[`_dc_${this.id}_render_data_`];
                            that._dc_update_indicator_(_id, _dc_render_data_.scrolling_config.indicator_index,
                                1);
                        }
                    });
                }
            }

        // 更新轮播指示器
        render_class.prototype._dc_update_indicator_ = function (id, index, direction) {
            var _dc_render_data_ = window[`_dc_${id}_render_data_`];
            clearTimeout(_dc_render_data_.scrolling_config._interval);
            // 移除之前已激活的点class
            var current_indicator = $(`._dc_${id}_indicator_container_active_class_`)[0];
            // 添加非激活类
            $(current_indicator).addClass(`_dc_${id}_indicator_container_deactive_class_`);
            // 移除激活类
            $(current_indicator).removeClass(`_dc_${id}_indicator_container_active_class_`);

            var array;
            // 显示左一张
            if (direction == 1) {
                if (_dc_render_data_.scrolling_config.indicator_index == 0) {
                    _dc_render_data_.scrolling_config.indicator_index = _dc_render_data_.data_config.data.length -
                        1;
                } else {
                    _dc_render_data_.scrolling_config.indicator_index = index - 1;
                }
                array = $(`#_dc_${_dc_render_data_.id}_ul_`).children();
                $(array[array.length - 1]).insertBefore($(array[0]));
            }
            // 显示右一张
            if (direction == 2) {
                if (_dc_render_data_.scrolling_config.indicator_index == (_dc_render_data_.data_config.data.length -
                        1)) {
                    _dc_render_data_.scrolling_config.indicator_index = 0;
                } else {
                    _dc_render_data_.scrolling_config.indicator_index = index + 1;
                }
                array = $(`#_dc_${_dc_render_data_.id}_ul_`).children();
                $(array[0]).insertAfter($(array[array.length - 1]));
            }

            // 设置当前点的激活状态
            var _this = document.getElementById(`_dc_${id}_indicator_container_`).children[_dc_render_data_
                .scrolling_config.indicator_index];

            $(_this).addClass(`_dc_${id}_indicator_container_active_class_`);
            $(_this).removeClass(`_dc_${id}_indicator_container_deactive_class_`);
            // 启动轮播定时器
            _dc_render_data_.scrolling_config._interval = setTimeout(() => {
                clearTimeout(_dc_render_data_.scrolling_config._interval);
                that._dc_update_indicator_(_dc_render_data_.id, _dc_render_data_
                    .scrolling_config.indicator_index, 2);
            }, _dc_render_data_.scrolling_config.interval * 1000);
        }

        // 点击分页
        render_class.prototype._dc_click_page_ =
            function (_this, id, func) {
                // 获取表格相关配置数据
                _dc_render_data_ = window[`_dc_${id}_render_data_`];
                // 是否允许跳转
                var is_jump_page_enable = false;
                // 获得当前页数
                page_number = _dc_render_data_.data_fetched.page_number;
                switch (func) {
                    case "step_pre_page":
                        page_number = 1;
                        if ($('#pre_step_' + _dc_render_data_.id).css('opacity') == '0.3') {
                            is_jump_page_enable = false;
                        } else {
                            $('#next_step_' + _dc_render_data_.id).css('opacity', '1')
                            $('#pre_step_' + _dc_render_data_.id).css('opacity', '0.3')
                            $('#pre_' + _dc_render_data_.id).css('opacity', '0.3')
                            $('#next_' + _dc_render_data_.id).css('opacity', '1')
                            is_jump_page_enable = true;
                        }
                        break;
                    case "pre_page":
                        $('#next_' + _dc_render_data_.id).css('opacity', '1')
                        $('#next_step_' + _dc_render_data_.id).css('opacity', '1')
                        if ((page_number - 1) < 1) {
                            page_number = 1;
                            if ($('#pre_' + _dc_render_data_.id).css('opacity') == '0.3') {
                                is_jump_page_enable = false;
                            }
                            $('#pre_' + _dc_render_data_.id).css('opacity', '0.3')
                            // 忽略
                        } else {
                            page_number--;
                            if (page_number == 1) {
                                $('#pre_' + _dc_render_data_.id).css('opacity', '0.3')
                                $('#pre_step_' + _dc_render_data_.id).css('opacity', '0.3')
                            }
                            is_jump_page_enable = true;
                        }
                        break;
                    case "next_page":
                        // 如果下一页>最大页数
                        $('#pre_' + _dc_render_data_.id).css('opacity', '1')
                        $('#pre_step_' + _dc_render_data_.id).css('opacity', '1')
                        if ((page_number + 1) > _dc_render_data_.data_fetched.page_amount) {
                            page_number = _dc_render_data_.data_fetched.page_amount;
                            if ($('#next_' + _dc_render_data_.id).css('opacity') == '0.3') {
                                is_jump_page_enable = false;
                            }
                            $('#next_' + _dc_render_data_.id).css('opacity', '0.3')
                            // 忽略
                        } else {
                            page_number++;
                            if (page_number == _dc_render_data_.data_fetched.page_amount) {
                                $('#next_' + _dc_render_data_.id).css('opacity', '0.3')
                                $('#next_step_' + _dc_render_data_.id).css('opacity', '0.3')
                            }
                            is_jump_page_enable = true;
                        }
                        break;
                    case "step_next_page":
                        page_number = _dc_render_data_.data_fetched.page_amount;
                        if ($('#next_step_' + _dc_render_data_.id).css('opacity') == '0.3') {
                            is_jump_page_enable = false;
                        } else {
                            $('#pre_step_' + _dc_render_data_.id).css('opacity', '1')
                            $('#pre_' + _dc_render_data_.id).css('opacity', '1')
                            $('#next_step_' + _dc_render_data_.id).css('opacity', '0.3')
                            $('#next_' + _dc_render_data_.id).css('opacity', '0.3')
                            is_jump_page_enable = true;
                        }
                        break;
                    case "jump-page":
                        page_number = _dc_render_data_.data_fetched.page_amount;
                        break;
                    default:
                        break;
                }

                // 获得当前页数
                _dc_render_data_.data_fetched.page_number = page_number;
                $(`#_dc_${_dc_render_data_.id}_current_page_inputor_`).val(page_number);
                if (is_jump_page_enable) {
                    that._dc_get_page_data_(_dc_render_data_.id, page_number);
                }
            }

        // 使用相应配置渲染表格
        render_class.prototype._dc_render_by_data_ =
            function (id, _dc_render_data_, is_force_refresh, page_fetched_count = 0) {
                var _ul_html_ = "";
                var _ul_temp_html_ = "";
                var _ul_class_ = "";
                var _li_class_ = "";
                var _li_html_ = "";
                var _temp_li_html;
                var _temp_item_amount_;
                var bansubmit = 0;
                // 之前已经获取的数据量
                var _pre_data_fetched_count_ = 0;
                if (_dc_render_data_.data_fetched.page_data) {
                    _pre_data_fetched_count_ = _dc_render_data_.data_fetched.all_data.length - _dc_render_data_
                        .data_fetched.page_data.length;
                } else {
                    _dc_render_data_.data_fetched.page_data = [];
                }

                // 以当前页数据渲染
                for (let index = 0; index < _dc_render_data_.data_fetched.page_data.length; index++) {
                    // 读出默认的渲染html
                    _temp_li_html = _dc_render_data_.li_config.li_html.default.html;
                    const row_data = that._dc_deep_clone_dict_(_dc_render_data_.data_fetched.page_data[index]);
                    // 输入类型的字段
                    if (row_data._dc_inputor_) {
                        switch (row_data.type) {
                            case "text":
                                _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require == "true" ? "border-color:red" : ""}">${row_data.title}</label>
<div><input style="${row_data.is_require == "true" ? "border-color:red" : ""}"  oninput="${row_data.is_require == "true" ? `_dc_on_input_validate_('${row_data.type}', '${row_data.column_name}',  ${row_data.max_value}, ${row_data.min_value},${row_data.is_require},${index})` : ""}" type="text" name="${row_data.column_name}" maxlength="${row_data.max_value}" class="layui-input" value="${row_data.default_value}" ></div><div id="${row_data.column_name}-tips"></div>
`
                                if (row_data.is_require) {
                                    bansubmit++
                                }
                                break;
                            case "date":
                                _temp_li_html = `
                         <label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require == "true" ? "border-color:red" : ""}">${row_data.title}</label>
                         <div>
                         <input name="${row_data.column_name}" oninput="_dc_on_input_validate_('${row_data.type}', '${row_data.column_name}',  ${row_data.start_date_value}, ${row_data.end_date_value}, '${row_data.is_require}')" id="${row_data.column_name}" type="text" name="title" maxlength="12" class="layui-input"></div>
                         <div id="${row_data.column_name}-tips"></div>
                        `
                                if (row_data.is_require) {
                                    bansubmit++
                                }
                                break;
                            case "number":
                                _temp_li_html = `
                         <label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require == "true" ? "border-color:red" : ""}">${row_data.title}</label>
                         <i id="${row_data.column_name}-left" class="layui-icon layui-icon-left"></i>
                         <input onblur="${row_data.is_require == "true" ? `_dc_on_input_validate_('${row_data.type}', '${row_data.column_name}',  ${row_data.max_value}, ${row_data.min_value})` : ""}" type="number" value="${row_data.default_value}" name="${row_data.column_name}" class="layui-input" style="display:inline-block;margin-bottom: 5px;width: 100px; text-align: right; padding:0 6px 0 5px;">
                                                    <i id="${row_data.column_name}-right" class="layui-icon layui-icon-right"></i>
                                                    <div id="${row_data.column_name}-tips"></div>`
                                if (row_data.is_require) {
                                    bansubmit++
                                }
                                break;
                            case "option":
                                _temp_li_html = `
                         <label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require == "true" ? "border-color:red" : ""}">${row_data.title}</label>
                         <div class="">`;
                                for (var i = 0; i < row_data.options.length; i++) {
                                    _temp_li_html +=
                                        `<input type="radio" title="${row_data.options_title[i]}" lay-filter="${row_data.column_name}" value="${row_data.options[i]}" name="${row_data.column_name}" ${row_data.options[i] == row_data.default_value ? "checked" : ''}>`

                                }
                                _temp_li_html += `</div>`
                                if (row_data.is_require) {
                                    bansubmit++
                                }
                                break;
                            case "bool":
                                _temp_li_html = `
                         <label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require == "true" ? "border-color:red" : ""}">${row_data.title}</label>
                         <div class="">
                            <input type="radio" title="${row_data.tvalue}" lay-filter="${row_data.column_name}" value="${row_data.tvalue}" name="${row_data.column_name}" ${row_data.tvalue == row_data.default_value ? "checked" : ''}>
                            <input type="radio" title="${row_data.fvalue}" lay-filter="${row_data.column_name}" value="${row_data.fvalue}" name="${row_data.column_name}" ${row_data.fvalue == row_data.default_value ? "checked" : ''}></div>
                        
    </div>
                        `
                                if (row_data.is_require) {
                                    bansubmit++
                                }
                                break;
                            case "checkbox":
                                _temp_li_html = `
                         <label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require == "true" ? "border-color:red" : ""}">${row_data.title}</label>
                         <div class="">`;
                                for (var i = 0; i < row_data.options.length; i++) {
                                    _temp_li_html +=
                                        `<input type="checkbox" title="${row_data.options_title[i]}" lay-filter="${row_data.column_name}" value="${row_data.options[i]}" name="${row_data.column_name}" >`

                                }
                                _temp_li_html += `</div>`
                                if (row_data.is_require) {
                                    bansubmit++
                                }
                                break;
                            default:
                                _temp_li_html = `<div></div>`
                                break;
                        }
                    }
                    // 显示类型字段
                    else {
                        // 先处理字段函数
                        if (_dc_render_data_.li_config.li_function) {
                            for (let index = 0; index < _dc_render_data_.li_config.li_function.length; index++) {
                                const element = _dc_render_data_.li_config.li_function[index];
                                switch (element.type) {
                                    case "item_amount":
                                        _temp_item_amount_ =
                                            `
<div li_function_index="${index}" key=${_dc_render_data_.id} index=${index} class="_dc_${_dc_render_data_.id}_counting_" type="-">${element.items.sub_html}</div>
<div index=${index} class="_dc_${_dc_render_data_.id}_counting_">${element.items.input_html}</div>
<div li_function_index="${index}" key=${_dc_render_data_.id} index=${index} class="_dc_${_dc_render_data_.id}_counting_" type="+">${element.items.plus_html}</div>`;
                                        break;
                                        // 字段值为空时的处理
                                    case "null_replace":
                                        if (row_data[element.field] == null || row_data[element.field] ==
                                            "") {
                                            row_data[element.field] = element.text;
                                        }
                                        break;
                                        // 字段类型为日期型
                                    case "format_datetime":
                                        if (element.format == "to-now") {
                                            // 获得到当前时间有多长
                                            row_data[element.field] = that._dc_get_diff_date_(row_data[
                                                element.field])
                                        }
                                        break;
                                    case "mask_text":
                                        row_data[element.field] = that._dc_mask_text_(row_data[element
                                            .field], element.from, element.to, element.char);
                                        break;
                                    case "format_filesize":
                                        row_data[element.field] = that._dc_get_file_formated_size_(parseInt(
                                            row_data[element.field]), element.bit);
                                        break;
                                    case "replace_text":
                                        row_data[element.field] = row_data[element.field].replace(element.text, element
                                            .replace_text)
                                        break;
                                    case "format_search_keyword":
                                        // 获得搜索关键字
                                        keyword = $(`#_dc_${id}_search_input_`).val();
                                        if (keyword) {
                                            // 以用户设置的颜色重点标出该关键字
                                            row_data[element.field] = row_data[element.field].toString()
                                                .replace(eval("/" + keyword + "/"),
                                                    `<a style='color:${element.color ? element.color : "red"}'>${keyword}</a>`
                                                );
                                        }
                                        break;
                                }
                            }
                        }

                        // 处理条件渲染
                        if (_dc_render_data_.li_config.li_html.condition) {
                            // 获取所有条件渲染表达式
                            var array = _dc_render_data_.li_config.li_html.condition;
                            for (let condition_index = 0; condition_index < array.length; condition_index++) {
                                // 获得渲染条件
                                const element = array[condition_index];
                                if (element.expression.indexOf("^") > -1) {
                                    // 替换常量( ^{ROW_INDEX} 表示行的常量)
                                    if (eval(element.expression.replace("^{ROW_INDEX}", "index"))) {
                                        // 符合条件则使用该条件指定的html
                                        _temp_li_html = element.html;
                                    }
                                } else {
                                    // 替换变量
                                    if (eval(element.expression.replace(/#{/, "row_data['").replace(/}/, "']"))) {
                                        // 符合条件则使用该条件指定的html
                                        _temp_li_html = element.html;
                                    }
                                }
                            }
                        }

                        // 处理多选节点
                        if (_dc_render_data_.check_config) {
                            switch (_dc_render_data_.check_config.mode) {
                                case "single":
                                    _temp_li_html = _temp_li_html.replace(
                                        `<div data-key="check_tag"></div>`,
                                        `<div data-id=${_dc_render_data_.id} data-index="${index}" data-key="check_tag">${_dc_render_data_.check_config.off_config.html}</div>`
                                    );
                                    break;
                                case "multi":
                                    _temp_li_html = _temp_li_html.replace(
                                        `<div data-key="check_tag"></div>`,
                                        `<div data-id=${_dc_render_data_.id} data-index="${index}" data-key="check_tag">${_dc_render_data_.check_config.off_config.html}</div>`
                                    );
                                    break;
                            }
                        }

                        // 为每个标签添加点击事件
                        array = _temp_li_html.split("<");
                        for (let tag_index = 0; tag_index < array.length; tag_index++) {
                            const element = array[tag_index];
                            if (element != "" && element.substring(0, 1) != "/") {
                                reg = />/;
                                attr_to_insert =
                                    ` onclick="_dc_on_click_ul_(this,'${_dc_render_data_.id}','',${_dc_render_data_.data_fetched.all_data.length + index - page_fetched_count})"`
                                array[tag_index] = element.replace(/>/, attr_to_insert + ">")
                            }
                        }
                        _temp_li_html = array.join("<");

                        // 将html模板中的#{}替换为字段名
                        for (var key in row_data) {
                            var item = row_data[key];
                            // 得到待替换的字段名
                            re = new RegExp(`#{${key}}`, "g");
                            _temp_li_html = _temp_li_html.replace(re, row_data[key]);
                        }

                        // 替换item_amount函数
                        _temp_li_html = _temp_li_html.replace("^{item_amount}",
                            `<div class="_dc_${_dc_render_data_.id}_item_amount_">${_temp_item_amount_}</div>`);
                    }

                    // 即将渲染时的回调，如需渲染前干预可在此操作
                    if (_dc_render_data_.cb_config.before_render) {
                        var _res = _dc_render_data_.cb_config.before_render({
                            data: row_data,
                            html: _temp_li_html,
                            index: _dc_render_data_.data_fetched.all_data.length + index -
                                page_fetched_count,
                        });
                        // 如果回调处理了数据则使用，否则使用之前的 
                        _temp_li_html = (_res && _res.html) ? _res.html : _temp_li_html;
                    }
                    _li_class_ = _dc_render_data_.li_config.li_class ?
                        `class="${_dc_render_data_.li_config.li_class}"` : "";
                    _ul_class_ = _dc_render_data_.ul_config && _dc_render_data_.ul_config.ul_class ?
                        `class="${_dc_render_data_.ul_config.ul_class}"` : "";
                    // 块状流模式
                    if (_dc_render_data_.direction == "block") {
                        _ul_html_ +=
                            `<ul ${_ul_class_} style="float:left;${_dc_render_data_.ul_config.ul_style}"><li ${_li_class_} style="cursor:pointer;${_dc_render_data_.li_config.li_style}">${_temp_li_html}</li></ul>`;
                    }
                    // 横竖向滚动模式
                    else {
                        _li_html_ +=
                            `<li index="${index+_pre_data_fetched_count_}" style="cursor:pointer;${_dc_render_data_.li_config.li_style}">${_temp_li_html}</li>`;
                    }
                }

                // 强制刷新模式则不追加内容，直接替换
                if (is_force_refresh) {
                    _ul_html_ =
                        `<ul id="_dc_${_dc_render_data_.id}_ul_" class="${_dc_render_data_.ul_config.ul_class}" style="${_dc_render_data_.ul_config.ul_style}${that.direction_style}">${_li_html_}</ul>`;
                    $(`#_dc_${_dc_render_data_.id}_ul_container_`).html(_ul_html_);
                }
                // 无限追回模式
                else {
                    // 块状流模式
                    if (_dc_render_data_.direction == "block") {
                        $(`#_dc_${_dc_render_data_.id}_ul_container_`).append(_ul_html_)
                    }
                    // 横竖向滚动模式
                    else {
                        var ul = document.getElementById(`_dc_${_dc_render_data_.id}_ul_`);
                        // 首次获取数据
                        if (!ul) {
                            _ul_html_ =
                                `<ul id="_dc_${_dc_render_data_.id}_ul_" class="${_dc_render_data_.ul_config.ul_class}" style="${_dc_render_data_.ul_config.ul_style}${that.direction_style}">${_li_html_}</ul>`;
                            $(`#_dc_${_dc_render_data_.id}_ul_container_`).html($(
                                `#_dc_${_dc_render_data_.id}_ul_container_`).html() + _ul_html_);
                        }
                        // 后续获取数据，则追加
                        else {
                            $(ul).append(_li_html_)
                        }
                    }
                }
                _ul_temp_html_ = "";

                // 处理指示器相关
                if (_dc_render_data_.scrolling_config) {
                    _dc_render_data_.scrolling_config.indicator_index = 0;

                    // 添加指示器
                    that._dc_append_indicator_(
                        _dc_render_data_.id,
                        _dc_render_data_.scrolling_config.indicator_status, _dc_render_data_.data_config
                        .data
                        .length);

                    // 左右按钮点击事件
                    $(`#_dc_${_dc_render_data_.id}_indicator_left_button_`).click(function () {
                        that._dc_update_indicator_(_dc_render_data_.id, _dc_render_data_
                            .scrolling_config.indicator_index, 1);
                    })
                    $(`#_dc_${_dc_render_data_.id}_indicator_right_button_`).click(function () {
                        that._dc_update_indicator_(_dc_render_data_.id, _dc_render_data_
                            .scrolling_config.indicator_index, 2);
                    })

                    // 启动轮播定时器
                    _dc_render_data_.scrolling_config._interval = setTimeout(() => {
                        clearTimeout(_dc_render_data_.scrolling_config._interval);
                        that._dc_update_indicator_(_dc_render_data_.id, _dc_render_data_
                            .scrolling_config.indicator_index, 2);
                    }, _dc_render_data_.scrolling_config.interval * 1000);
                }

                $(`._dc_${_dc_render_data_.id}_counting_`).click(function () {
                    var that = window[`_dc_${id}_render_object_`];
                    if ($(this).attr("type") == "-") {
                        // 获取input中的数值
                        var value = parseInt($($(this).parent()[0].children[1].children[0]).val());
                        // 不允许<0
                        if (value <= 0) {
                            $($(this).parent()[0].children[1].children[0]).val(0);
                        } else {
                            that._dc_on_change_input_value_(this, value - 1);
                        }
                    } else if ($(this).attr("type") == "+") {
                        // 获取input中的数值
                        var value = parseInt($($(this).parent()[0].children[1].children[0]).val()) + 1;
                        that._dc_on_change_input_value_(this, value);
                    }
                });
                $(`_dc_${id}_search_panel_`).css("display", "block");
                // 即将渲染时的回调，如需渲染前干预可在此操作
                if (_dc_render_data_.cb_config.after_render) {
                    _dc_render_data_.cb_config.after_render();
                }
            }

        // 获取分页数据
        render_class.prototype._dc_get_page_data_ =
            function (id, page_number) {
                // 如果有固定数据传入，则直接使用，而不使用请求获取数据
                if (that._dc_render_data_.data_config.data && that._dc_render_data_.data_config.data.length >
                    0) {
                    var res = {
                        res: 1,
                        data: that._dc_render_data_.data_config.data,
                    }
                    // 获取数据之后的统一处理
                    that._dc_processing_data_(that._dc_render_data_, res, 1)
                }
                // 使用请求获取数据
                else {
                    // 缓存模式
                    if (that._dc_render_data_.data_config.cache_config && that._dc_render_data_.data_config
                        .cache_config
                        .storage_cache) {
                        var _temp_data = localStorage[`render_cache_${that._dc_render_data_.id}`];

                        if (_temp_data) {
                            var res = {
                                res: 1,
                                data: JSON.parse(_temp_data),
                            }
                            var is_cache_data = true;
                            // 缓存模式下，先使用缓存内容显示数据
                            that._dc_processing_data_(that._dc_render_data_, res, 1, is_cache_data);
                        }
                    }

                    // 设置待请求页数
                    if (page_number == "") {
                        page_number = 1
                    } else {
                        that._dc_render_data_.data_config.require.data[that._dc_render_data_.data_config.require
                            .page_number_param] = page_number;
                    }
                    // 本地数据模式
                    if (that._dc_render_data_.data_config.data && that._dc_render_data_.data_config.data.length > 0) {

                    }
                    // 请求数据模式
                    else {
                        // 有关键字搜索条件
                        if ($(`#_dc_${id}_search_input_`).val() || $(`#_dc_${id}_search_input_`).val() == "") {
                            if (that._dc_render_data_.data_config.require.search_keyword_param) {
                                if (that._dc_render_data_.search_config && that._dc_render_data_.search_config
                                    .query_fields) {
                                    // 插入需要查询的字段
                                    that._dc_render_data_.data_config.require.data[that._dc_render_data_.data_config
                                            .require
                                            .search_keyword_param] = that._dc_render_data_.search_config
                                        .query_fields;
                                    // 从搜索框中获取待查询值，并插入需要查询的值（暂时只支持字符串的查询）
                                    that._dc_render_data_.data_config.require.data["__QUERY_CONDITION"] = $(
                                        `#_dc_${id}_search_input_`).val();
                                } else {
                                    console.error("query_fields 未配置.")
                                }
                                // 将搜索参数写入请求data中
                                that._dc_render_data_.data_config.require.data[that._dc_render_data_.data_config
                                        .require
                                        .search_keyword_param] =
                                    $(`#_dc_${id}_search_input_`).val();
                            } else {
                                console.error("search_keyword_param 未配置.")
                            }
                        }
                        $.ajax({
                            method: that._dc_render_data_.data_config.require.method,
                            dataType: that._dc_render_data_.data_config.require.dataType,
                            url: that._dc_render_data_.data_config.require.url,
                            data: {
                                params: JSON.stringify(that._dc_render_data_.data_config.require.data)
                            },
                            success: function (res) {
                                if (res['res'] == 0) {
                                    setTimeout(() => {
                                        // 加载完成状态
                                        that.is_fetching_data = false;
                                    }, 1000);
                                    ui_class.show_error(res['tips'] ? res['tips'] : res['desc']);
                                } else {
                                    // 获取数据之后的统一处理
                                    that._dc_processing_data_(that._dc_render_data_, res, page_number)
                                }
                            }
                        })
                    }
                }
            }

        // 获取数据之后的统一处理
        render_class.prototype._dc_processing_data_ =
            function (_dc_render_data_, res, page_number, is_cache_data) {
                var is_force_refresh = false;
                // 本地数据模式
                if (_dc_render_data_.data_config.data && _dc_render_data_.data_config.data.length > 0) {
                    _dc_render_data_.data_fetched.all_data = res.data;

                    // 当前页数据
                    _dc_render_data_.data_fetched.page_data = res.data;
                }
                // 接口请求模式
                else {
                    if (res.rows == 0) {
                        $("#_dc_" + _dc_render_data_.id + "_pagination_container_").html(
                            `<div style="line-height: 66px;padding: 15px;text-align: center;color: #999;border: 1px solid #ddd;"><img style="width:50px" src="https://res.dcdev.net/dcdev/v1.0.6/assets/images/empty.svg"></div>`
                        );
                        $("#" + "_dc_detail_" + _dc_render_data_.id).html(
                            `共 0 条 ，分 0 页`);
                    }
                    // 分页模式
                    if (that._dc_render_data_.data_config.require && that._dc_render_data_.data_config.require
                        .pagination && that._dc_render_data_.data_config.require.pagination.enable) {
                        if (res[_dc_render_data_.data_config.require.require_data_param]) {
                            _dc_render_data_.data_fetched.all_data = _dc_render_data_.data_fetched.all_data.concat(
                                res[_dc_render_data_.data_config.require.require_data_param]);
                        } else {
                            _dc_render_data_.data_fetched.all_data = [];
                        }
                        // 强制刷新模式
                        is_force_refresh = true;
                    }
                    // 无限模式
                    else {
                        if (res[_dc_render_data_.data_config.require.require_data_param]) {
                            _dc_render_data_.data_fetched.all_data = _dc_render_data_.data_fetched.all_data.concat(
                                res[_dc_render_data_.data_config.require.require_data_param]);
                        } else {
                            _dc_render_data_.data_fetched.all_data = [];
                        }
                    }
                    // 请求的所有数据总量
                    _dc_render_data_.data_fetched.data_count = parseInt(res[_dc_render_data_.data_config.require
                        .data_count_param]);
                    // 每页数据量
                    _dc_render_data_.data_fetched.page_count = parseInt(res[_dc_render_data_.data_config.require
                        .page_count_param]);
                    // 当前页码
                    _dc_render_data_.data_fetched.page_number = parseInt(res[_dc_render_data_.data_config
                        .require
                        .page_number_param]);
                    // 当前页数据
                    _dc_render_data_.data_fetched.page_data = res.data;
                    // 页码数量
                    _dc_render_data_.data_fetched.page_amount = Math.ceil(_dc_render_data_.data_fetched
                        .data_count /
                        _dc_render_data_.data_fetched.page_count);
                }

                // 获取数据之后的回调
                if (_dc_render_data_.cb_config.data_fetched) {
                    var _res = _dc_render_data_.cb_config.data_fetched({
                        // 当前已获取的所有数据
                        all_data: _dc_render_data_.data_fetched.all_data,
                        data_count: _dc_render_data_.data_fetched.data_count,
                        page_count: _dc_render_data_.data_fetched.page_count,
                        page_number: _dc_render_data_.data_fetched.page_number,
                        page_amount: _dc_render_data_.data_fetched.page_amount,
                        // 本页数据量
                        page_data: res.data,
                    });
                    // 如果回调处理了数据则使用，否则使用之前的
                    res.data = (_res && _res.data) ? _res.data : res.data;
                }

                // 本地数据模式
                if (_dc_render_data_.data_config.data && _dc_render_data_.data_config.data.length > 0) {}
                // 接口请求模式
                else {
                    // 计算分页数量
                    record_amount = res[_dc_render_data_.data_config.require.data_count_param];
                    page_count = res[_dc_render_data_.data_config.require.page_count_param];
                    _dc_render_data_.data_fetched.page_amount = Math.ceil(parseInt(record_amount) /
                        parseInt(page_count));
                    // 写入当前页数 
                    $(`#_dc_${_dc_render_data_.id}_current_page_inputor_`).val(page_number);
                    if (page_number == 1) {
                        $('#pre-step' + _dc_render_data_.id).css('opacity', '0.3')
                        $('#pre' + _dc_render_data_.id).css('opacity', '0.3')
                        $('#next' + _dc_render_data_.id).css('opacity', '1')
                        $('#next-step' + _dc_render_data_.id).css('opacity', '1')
                    }
                    if (_dc_render_data_.data_fetched.page_amount == 1) {
                        $('#pre-step' + _dc_render_data_.id).css('opacity', '0.3')
                        $('#pre' + _dc_render_data_.id).css('opacity', '0.3')
                        $('#next' + _dc_render_data_.id).css('opacity', '0.3')
                        $('#next-step' + _dc_render_data_.id).css('opacity', '0.3')
                    }
                    $("#" + "_dc_detail_" + _dc_render_data_.id).html(
                        `共 ${record_amount} 条 ，分 ${_dc_render_data_.data_fetched.page_amount} 页`);
                }

                // 缓存模式
                if (_dc_render_data_.data_config.cache_config && _dc_render_data_.data_config.cache_config
                    .storage_cache) {
                    // 正在处理的是缓存数据
                    if (is_cache_data) {

                    }
                    // 接口返回的数据
                    else {
                        // 返回的是首页数据
                        if (page_number == 1) {
                            var _temp_data = localStorage[`render_cache_${_dc_render_data_.id}`];
                            if (_temp_data) {
                                // 获取的数据跟缓存不一致，更新缓存，设置强制更新标志
                                if (!(JSON.stringify(res.data) === _temp_data)) {
                                    // 当缓存模式下，更新了首页
                                    localStorage[`render_cache_${_dc_render_data_.id}`] = JSON.stringify(res
                                        .data)
                                }
                                is_force_refresh = true;
                            } else {
                                localStorage[`render_cache_${_dc_render_data_.id}`] = JSON.stringify(res.data);
                            }
                        }
                    }
                }
                // 渲染表格
                that._dc_render_by_data_(_dc_render_data_.id, _dc_render_data_, is_force_refresh, res.data ? res.data
                    .length : 0);

                // 加载完成状态
                that.is_fetching_data = false;
            }

        // 全选
        render_class.prototype.select_all =
            function (id) {
                // 获取表格相关配置数据
                var _dc_render_data_ = window[`_dc_${id}_render_data_`];
                var li = element.children[0].children[0];
                // 处理选择
                if (_dc_render_data_.check_config.enable) {
                    var array = $(`#_dc_${id}_ul_`).children();
                    // 清空已选择状态
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index];
                        $(li).html(_dc_render_data_.check_config.on_config.html)
                        $(li).data("checked", 1);
                        _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 1;
                    }
                }
            }
        // 反全选
        render_class.prototype.unselect_all =
            function (id) {
                // 获取表格相关配置数据
                var _dc_render_data_ = window[`_dc_${id}_render_data_`];
                var li = element.children[0].children[0];
                // 处理选择
                if (_dc_render_data_.check_config.enable) {
                    var array = $(`#_dc_${id}_ul_`).children();
                    // 清空已选择状态
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index];
                        $(li).html(
                            _dc_render_data_.check_config.off_config.html);
                        $(li).data("checked", 0);
                        _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 0;
                    }
                }
            }
        // 反选
        render_class.prototype.reverse_select =
            function (id) {
                // 获取表格相关配置数据
                var _dc_render_data_ = window[`_dc_${id}_render_data_`];
                var li = element.children[0].children[0];
                // 处理选择
                if (_dc_render_data_.check_config.enable) {
                    var array = $(`#_dc_${id}_ul_`).children();
                    // 清空已选择状态
                    for (let index = 0; index < array.length; index++) {
                        const element = array[index];
                        // 设置当前选中状态
                        if ($(li).data("checked") != 1) {
                            $(li).html(_dc_render_data_.check_config.on_config.html)
                            $(li).data("checked", 1);
                            _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 1;
                        } else {
                            $(li).html(_dc_render_data_.check_config.off_config.html)
                            $(li).data("checked", 0);
                            _dc_render_data_.data_fetched.all_data[index]._dc_select_ = 0;
                        }
                    }
                }
            }
    }
</script>